<!-- 组织机构 列表 -->
<template>
  <div class="page-container">
    <div class="flex-container">
      <!-- 组织机构 -->
      <div class="left-section">
        <organization-tree @resetList="getOrgId" @returnFirstId="getTreeFirstId" />
      </div>
      <div class="right-section">
        <list-searcher :searchList="searchList" :columns="2" v-model:searchForm="queryParam" @loadData="loadData" />
        <table-index :table="table" @loadData="loadData">
          <template #authorgnames="{ record }">
            <template v-if="record.authOrgNames && record.authOrgNames.length > 0">
              <more-popup :list="record.authOrgNames" />
            </template>
          </template>
          <template #rolenames="{ record }">
            <template v-if="record.roles && record.roles.split(',').length > 0">
              <more-popup :list="record.roles.split(',')" />
            </template>
          </template>
        </table-index>
      </div>
    </div>
  </div>
  <!-- 导入 -->
  <import-modal ref="imoportRef" action="/staff/importExcel" download-import="/员工信息导入模板.xlsx" @ok="loadData" />
</template>

<script setup name="OrganizationList">
  import { useExport } from '@/hooks/list'
  import organizationTree from '../institution/components/organization.vue'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { getStaffPageList, staffExportExcel } from '@/api/organization/organization'
  import { onMounted, reactive, computed, ref } from 'vue'
  import useNavigate from '@/hooks/useNavigate'
  import { useSysDict, sysDict, usePageDict } from '@/hooks/useDict'

  const { navigateTo } = useNavigate()
  const staffDict = usePageDict('staffDict')
  useSysDict(['staff_post'])

  const imoportRef = ref(null)

  // 接口参数（不包含page信息）
  const queryParam = reactive({
    // 默认查询在职
    status: 1,
  })
  // 查询条件
  const searchList = computed(() => {
    return [
      { label: '员工姓名', prop: 'likeRealname', type: 'a-input' },
      { label: '员工手机号', prop: 'likePhone', type: 'a-input' },
      { label: '登录名', prop: 'usernameLike', type: 'a-input' },
      {
        label: '状态',
        prop: 'status',
        type: 'a-select',
        options: staffDict.staffStatusList,
      },
      {
        label: '员工岗位',
        prop: 'staffPost',
        type: 'a-select',
        options: sysDict.staff_post,
      },
    ]
  })
  // //左侧 组织机构ID
  const organizationId = ref('')
  const getOrgId = (e) => {
    organizationId.value = e
    // console.log('回传organizationId', organizationId.value)
    if (organizationId.value) {
      queryParam.organizationId = e
    }
    loadData(1)
  }

  // 默认的organizationId
  const getTreeFirstId = (e) => {
    if (!organizationId.value) {
      organizationId.value = e
    }
  }

  // table 配置
  const table = useTable({
    columns: [
      { title: '所属机构', dataIndex: 'organizationName', width: 150, fixed: 'left' },
      { title: '员工姓名', dataIndex: 'realname', width: 110 },
      { title: '登录名', dataIndex: 'username', width: 110 },
      { title: '员工手机号', dataIndex: 'phone', width: 110 },
      { title: '员工岗位', dataIndex: 'staffPostName', width: 100 },
      { title: '机构权限', dataIndex: 'authOrgNames', width: 150, slotName: 'authorgnames' },
      { title: '角色', dataIndex: 'roles', width: 100, slotName: 'rolenames' },
      { title: '状态', dataIndex: 'statusName', width: 60 },
    ],
    operates: [
      {
        label: '详情',
        permission: 'svms:merchant:organization.detail',
        method: (record) => {
          navigateTo(`/staff/detail/${record.id}`, `${record.realname}-详情`)
        },
      },
      {
        label: '编辑',
        permission: 'svms:merchant:organization.edit',
        method: (record, column, rowIndex) => editStaff(record, column, rowIndex),
      },
    ],
    buttons: [
      {
        mode: 'import',
        label: '导入',
        permission: 'svms:merchant:organization.import',
        method: () => {
          imoportRef.value.show()
        },
      },
      {
        mode: 'import',
        label: '导出',
        permission: 'svms:merchant:organization.export',
        method: () => handleAdd(),
      },
      {
        type: 'primary',
        icon: 'plus',
        label: '新增员工',
        permission: 'svms:merchant:organization.add',
        method: () => addStaff(),
      },
    ],
  })
  const loadData = useFetchTableDataApi(table, queryParam, getStaffPageList)

  // 导出事件
  const handleAdd = () => {
    useExport(staffExportExcel, queryParam)
  }
  // 新增员工
  const addStaff = () => {
    navigateTo(`/staff/create/${organizationId.value}`)
  }
  // 编辑员工
  // const staffRecord = ref(null)
  const editStaff = (record) => {
    navigateTo(`/staff/edit/${record.id}`, `${record.realname}-编辑`)
  }

  defineExpose({
    getOrgId,
    // save,
  })

  // mounted 调用接口
  onMounted(() => {
    loadData()
  })
</script>

<style lang="less" scoped>
  .page-container {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;

    .flex-container {
      display: flex;
      width: 100%;
      height: 100%;

      ::-webkit-scrollbar {
        width: 9px;
        height: 9px;
        margin: 0 3px;
        background-color: transparent;
      }

      :hover::-webkit-scrollbar-thumb {
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: var(--color-neutral-3);
        opacity: 0.8;

        &:hover {
          background-color: var(--color-neutral-5);
        }
      }

      .left-section {
        width: 22vw;
        margin-right: 16px;
        background-color: #fbfbfc;
        overflow: hidden;
      }
      .right-section {
        flex: 1;
        margin-right: -20px;
        padding-right: 9px;
        overflow-x: hidden;
        overflow-y: auto;
      }
    }
  }
</style>
